<template>
  <div class="dashboard-container">
    <!-- 实例信息部分 -->
    <div class="hw-panel">
      <div class="hw-panel-header">
        <div class="hw-panel-title">
          <i class="el-icon-info-circle"></i> 实例信息
        </div>
        <div class="hw-panel-actions">
          <el-button type="text" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
        </div>
      </div>

      <div class="hw-panel-body">
        <!-- 基础信息 -->
        <div class="info-group">
          <div class="info-header" @click="toggleSection('basicInfo')">
            <i :class="['el-icon-arrow-right', {'is-open': sections.basicInfo}]"></i>
            <span>基础信息</span>
          </div>
          <div class="info-content" v-show="sections.basicInfo">
            <div class="info-grid">
            <div class="info-item">
                <div class="info-label">实例名称</div>
                <div class="info-value">{{currentResource.resourceName}}</div>
            </div>
            <div class="info-item">
                <div class="info-label">实例ID</div>
                <div class="info-value with-icon">
                  <span class="ellipsis-text">{{currentResource.resourceId}}</span>
                  <i class="el-icon-document-copy" @click="copyText(currentResource.resourceId)"></i>
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">可用时段</div>
                <div class="info-value">02:00 — 06:00 (GMT+08:00)</div>
            </div>
            </div>
          </div>
        </div>

        <!-- 访问信息 -->
        <div class="info-group">
          <div class="info-header" @click="toggleSection('accessInfo')">
            <i :class="['el-icon-arrow-right', {'is-open': sections.accessInfo}]"></i>
            <span>访问信息</span>
          </div>
          <div class="info-content" v-show="sections.accessInfo">
            <div class="info-grid">
            <div class="info-item">
                <div class="info-label">管理员账号</div>
                <div class="info-value">root</div>
            </div>
            <div class="info-item">
                <div class="info-label">{{currentResource.projectsName}}</div>
              <div class="info-value">
                  <span class="hw-label">default</span>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">可用区</div>
                <div class="info-value">河南区1</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 配置信息 -->
        <div class="info-group">
          <div class="info-header" @click="toggleSection('configInfo')">
            <i :class="['el-icon-arrow-right', {'is-open': sections.configInfo}]"></i>
            <span>配置信息</span>
          </div>
          <div class="info-content" v-show="sections.configInfo">
            <div class="info-grid">
            <div class="info-item">
                <div class="info-label">数据库引擎与版本</div>
                <div class="info-value">
                  {{dataBaseInstance.datastore.type}} {{dataBaseInstance.datastore.complete_version}}
                  <span class="hw-label small">主从版</span>
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">规格代码</div>
                <div class="info-value">rds.mysql.n1.large.2 | 2 vCPUs | 8 GB (通用型)</div>
            </div>
            <div class="info-item">
                <div class="info-label">存储空间</div>
                <div class="info-value">SSD云盘 | {{dataBaseInstance.volume.size}} GB</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 网络信息 -->
        <div class="info-group">
          <div class="info-header" @click="toggleSection('networkInfo')">
            <i :class="['el-icon-arrow-right', {'is-open': sections.networkInfo}]"></i>
            <span>网络信息</span>
          </div>
          <div class="info-content" v-show="sections.networkInfo">
            <div class="info-grid">
              <div class="info-item">
                <div class="info-label">内网地址</div>
                <div class="info-value with-icon">
                  192.168.0.129
                  <i class="el-icon-document-copy" @click="copyText('192.168.0.129')"></i>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">内网域名</div>
                <div class="info-value with-icon">
                  <span class="ellipsis-text">8070b468844448fb976173fbec8508bcin01.internal.cn-east-3.rds.myhuaweicloud.com</span>
                  <i class="el-icon-document-copy" @click="copyText('8070b468844448fb976173fbec8508bcin01.internal.cn-east-3.rds.myhuaweicloud.com')"></i>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">数据库端口</div>
                <div class="info-value">{{ dataBaseInstance.port }}</div>
              </div>
              <div class="info-item">
                <div class="info-label">子网</div>
                <div class="info-value">
                  <a href="javascript:void(0)" class="hw-link">subnet-default(192.168.0.0/24)</a>
                </div>
              </div>
            <div class="info-item">
                <div class="info-label">安全组</div>
              <div class="info-value">
                  已绑定1个安全组
                  <a href="javascript:void(0)" class="hw-link">管理</a>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">最大连接数</div>
                <div class="info-value">6,000</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 订单信息 -->
        <div class="info-group">
          <div class="info-header" @click="toggleSection('orderInfo')">
            <i :class="['el-icon-arrow-right', {'is-open': sections.orderInfo}]"></i>
            <span>订单信息</span>
          </div>
          <div class="info-content" v-show="sections.orderInfo">
            <div class="info-grid">
              <div class="info-item">
                <div class="info-label">创建时间</div>
                <div class="info-value">2025-04-07 15:53:39</div>
              </div>
              <div class="info-item">
                <div class="info-label">到期时间</div>
                <div class="info-value">2027-08-29 23:59:59</div>
            </div>
            <div class="info-item">
                <div class="info-label">订单号</div>
                <div class="info-value">CS240326173IH20EG</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 监控部分 -->
    <div class="hw-panel">
      <div class="hw-panel-header">
        <div class="hw-panel-title">
          <i class="el-icon-data-analysis"></i> 监控
        </div>
        <div class="hw-panel-actions">
          <div class="time-filter-group">
            <span class="time-filter" :class="{'active': timeRange === '1h'}" @click="changeTimeRange('1h')">1小时</span>
            <span class="time-filter" :class="{'active': timeRange === '6h'}" @click="changeTimeRange('6h')">6小时</span>
            <span class="time-filter" :class="{'active': timeRange === '1d'}" @click="changeTimeRange('1d')">1天</span>
            <span class="time-filter" :class="{'active': timeRange === '7d'}" @click="changeTimeRange('7d')">7天</span>
            <i class="el-icon-arrow-down"></i>
          </div>
          <el-button type="text" icon="el-icon-refresh" @click="refreshCharts">刷新</el-button>
        </div>
      </div>

      <div class="hw-panel-body">
        <div class="monitor-grid">
          <!-- CPU使用率 -->
          <div class="monitor-card">
            <div class="monitor-header">
              <div class="monitor-title">
                CPU使用情况
                <span class="healthy-tag">正常</span>
              </div>
            </div>
            <div class="monitor-content">
              <div ref="cpuChart" class="chart-container"></div>
            </div>
          </div>

          <!-- IOPS使用情况 -->
          <div class="monitor-card">
            <div class="monitor-header">
              <div class="monitor-title">
                IOPS使用情况
                <span class="healthy-tag">正常</span>
              </div>
            </div>
            <div class="monitor-content">
              <div ref="iopsChart" class="chart-container"></div>
            </div>
          </div>
        </div>

        <div class="monitor-grid">
          <!-- 连接分布 -->
          <div class="monitor-card">
            <div class="monitor-header">
              <div class="monitor-title">
                连接分布
                <span class="healthy-tag">正常</span>
              </div>
            </div>
            <div class="monitor-content">
              <div ref="connectionChart" class="chart-container"></div>
            </div>
          </div>

          <!-- 活跃连接数 -->
          <div class="monitor-card">
            <div class="monitor-header">
              <div class="monitor-title">
                活跃连接数量 (Count)
                <span class="healthy-tag">正常</span>
              </div>
            </div>
            <div class="monitor-content">
              <div ref="activeConnectionChart" class="chart-container"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import {getsqlsl, listDatabases, listDatastores, listFlavors, showMetricDatamore} from "@/api/resell/orderinstancesql";

export default {
  name: 'CloudDatabaseDashboard',
  props: {
    currentResource: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      timeRange: '1h',
      sections: {
        basicInfo: true,
        accessInfo: true,
        configInfo: true,
        networkInfo: true,
        orderInfo: true
      },
      charts: {},
      chartData: {
        cpu: {
          times: ['08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
          values: [5, 7, 10, 8, 9, 6, 8, 10, 7, 5, 8, 9, 8]
        },
        iops: {
          times: ['08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
          values: [120, 150, 180, 160, 140, 190, 210, 170, 150, 140, 160, 180, 170]
        },
        connections: [
          { value: 65, name: '活跃连接', itemStyle: { color: '#409EFF' } },
          { value: 35, name: '空闲连接', itemStyle: { color: '#67C23A' } }
        ],
        activeConnection: {
          times: ['08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00'],
          values: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
        }
      },
      dataBaseInstance:{},
      chartsInitialized: false,
      chartsInitTimer: null
    }
  },
  mounted() {
    // 延迟初始化图表，避免DOM渲染问题
    this.chartsInitTimer = setTimeout(() => {
      this.safeInitCharts();
    }, 500);
  },
  created() {
    // 仅获取数据，不初始化图表
    this.fetchData();
  },
  methods: {
    toggleSection(section) {
      this.sections[section] = !this.sections[section]
      this.$nextTick(() => {
        this.resizeCharts()
      })
    },

    changeTimeRange(range) {
      this.timeRange = range
      this.refreshCharts()
    },

    // 新增方法：安全地初始化图表
    safeInitCharts() {
      // 确保所有图表DOM元素都存在
      if (!this.$refs.cpuChart || !this.$refs.iopsChart || 
          !this.$refs.connectionChart || !this.$refs.activeConnectionChart) {
        console.log('图表DOM元素尚未准备好，500ms后重试');
        // 重新安排计时器
        clearTimeout(this.chartsInitTimer);
        this.chartsInitTimer = setTimeout(() => {
          this.safeInitCharts();
        }, 500);
        return;
      }
      
      // 初始化图表
      try {
        this.initCharts();
        this.chartsInitialized = true;
        console.log('图表初始化成功');
      } catch (error) {
        console.error('图表初始化失败:', error);
        // 重试
        clearTimeout(this.chartsInitTimer);
        this.chartsInitTimer = setTimeout(() => {
          this.safeInitCharts();
        }, 1000);
      }
    },

    initCharts() {
      // CPU使用率图表
      this.charts.cpu = echarts.init(this.$refs.cpuChart)
      this.charts.cpu.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>{a}: {c}%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.cpu.times,
          axisLine: { lineStyle: { color: '#E0E0E0' } },
          axisLabel: { color: '#606266', fontSize: 10 }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { lineStyle: { color: '#EBEEF5', type: 'dashed' } },
          axisLabel: { color: '#606266', fontSize: 10 }
        },
        series: [{
            name: 'CPU使用率',
            type: 'line',
            smooth: true,
            symbol: 'none',
          lineStyle: { width: 2, color: '#409EFF' },
            areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
              { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
            ])
          },
          data: this.chartData.cpu.values
        }]
      })

      // IOPS使用率图表
      this.charts.iops = echarts.init(this.$refs.iopsChart)
      this.charts.iops.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>{a}: {c} IOPS'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.iops.times,
          axisLine: { lineStyle: { color: '#E0E0E0' } },
          axisLabel: { color: '#606266', fontSize: 10 }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { lineStyle: { color: '#EBEEF5', type: 'dashed' } },
          axisLabel: { color: '#606266', fontSize: 10 }
        },
        series: [{
          name: 'IOPS',
            type: 'line',
            smooth: true,
            symbol: 'none',
          lineStyle: { width: 2, color: '#67C23A' },
            areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
              { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
            ])
          },
          data: this.chartData.iops.values
        }]
      })

      // 连接分布饼图
      this.charts.connection = echarts.init(this.$refs.connectionChart)
      this.charts.connection.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: { color: '#606266', fontSize: 12 },
          data: ['活跃连接', '空闲连接']
        },
        series: [{
            name: '连接分布',
            type: 'pie',
          radius: ['45%', '70%'],
            avoidLabelOverlap: false,
            label: {
            show: false,
            position: 'center'
            },
            emphasis: {
              label: {
                show: true,
              fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
          data: this.chartData.connections
        }]
      })

      // 活跃连接数图表
      this.charts.activeConnection = echarts.init(this.$refs.activeConnectionChart)
      this.charts.activeConnection.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>{a}: {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.activeConnection.times,
          axisLine: { lineStyle: { color: '#E0E0E0' } },
          axisLabel: { color: '#606266', fontSize: 10 }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { lineStyle: { color: '#EBEEF5', type: 'dashed' } },
          axisLabel: { color: '#606266', fontSize: 10 }
        },
        series: [{
            name: '活跃连接数',
            type: 'line',
            smooth: true,
            symbol: 'none',
          lineStyle: { width: 2, color: '#E6A23C' },
          data: this.chartData.activeConnection.values
        }]
      })

      // 添加窗口大小变化的监听器
      window.addEventListener('resize', this.resizeCharts)
    },

    resizeCharts() {
      for (const key in this.charts) {
        if (this.charts[key]) {
          this.charts[key].resize()
        }
      }
    },

    refreshCharts() {
      // 这里可以根据 this.timeRange 获取不同时间段的数据
      // 模拟刷新图表
      this.$message.success('图表数据已更新')

      // 更新图表数据前进行检查
      if (this.charts.cpu) {
        this.charts.cpu.setOption({
          xAxis: { data: this.chartData.cpu.times },
          series: [{ data: this.chartData.cpu.values }]
        })
      }

      if (this.charts.iops) {
        this.charts.iops.setOption({
          xAxis: { data: this.chartData.iops.times },
          series: [{ data: this.chartData.iops.values }]
        })
      }

      if (this.charts.connection) {
        this.charts.connection.setOption({
          series: [{ data: this.chartData.connections }]
        })
      }

      if (this.charts.activeConnection) {
        this.charts.activeConnection.setOption({
          xAxis: { data: this.chartData.activeConnection.times },
          series: [{ data: this.chartData.activeConnection.values }]
        })
      }
    },

    // 修改原有方法：分离数据获取和图表刷新
    fetchData() {
      // 调用后端API获取数据
      getsqlsl(this.currentResource).then(response => {
        if (response.code == 200) {
          this.dataBaseInstance = response.rows[0]
          console.log("getsqlsl:")
          console.log(this.dataBaseInstance)
        }
      }).catch(error => {
        console.error("获取数据失败:", error)
      })

      // 其他API调用...
      console.log("listDatastores:");
      listDatastores(this.currentResource).then(response=>{
        console.log(response);
      })
      console.log("listFlavors:");
      listFlavors(this.currentResource).then(response=>{
        console.log(response);
      })

      console.log("listDatabases:");
      listDatabases(this.currentResource).then(response=>{
        console.log(response)
      })
      console.log("showMetricDatamore:");
      this.currentResource.other1 = 1;
      showMetricDatamore(this.currentResource).then(response=>{
        console.log(response);
        if (response.code === 200 && response.rows) {
          this.processMonitorData(response.rows);
        }
      })

      // 如果图表已初始化，则刷新图表
      if (this.chartsInitialized) {
        this.safeRefreshCharts()
      } else {
        // 如果图表未初始化，尝试初始化
        this.safeInitCharts()
      }
    },

    // 新增方法：处理监控数据
    processMonitorData(rows) {
      // 初始化数据对象
      const processedData = {
        cpu: { times: [], values: [] },
        iops: { times: [], values: [] },
        memory: { times: [], values: [] },
        connections: { total: 0, active: 0 },
        activeConnection: { times: [], values: [] }
      };
      
      // 处理每种指标数据
      rows.forEach(item => {
        const datapoints = item.datapoints || [];
        if (!datapoints.length) return;
        
        // 准备时间轴数据(所有指标共用相同的时间轴)
        if (processedData.cpu.times.length === 0 && datapoints.length > 0) {
          processedData.cpu.times = datapoints.map(point => {
            const date = new Date(parseInt(point.timestamp));
            return date.getHours().toString().padStart(2, '0') + ':' + 
                   date.getMinutes().toString().padStart(2, '0');
          });
          // 复制相同的时间轴给其他指标
          processedData.iops.times = [...processedData.cpu.times];
          processedData.memory.times = [...processedData.cpu.times];
          processedData.activeConnection.times = [...processedData.cpu.times];
        }
        
        // 根据指标类型处理数据
        switch (item.metric_name) {
          case 'rds001_cpu_util': // CPU使用率
            processedData.cpu.values = datapoints.map(point => parseFloat(point.average));
            break;
          case 'rds002_mem_util': // 内存使用率
            processedData.memory.values = datapoints.map(point => parseFloat(point.average));
            break;
          case 'rds003_iops': // IOPS使用情况
            processedData.iops.values = datapoints.map(point => parseFloat(point.average));
            break;
          case 'rds006_conn_count': // 总连接数
            processedData.connections.total = Math.round(parseFloat(datapoints[datapoints.length - 1].average));
            // 更新数据点
            processedData.activeConnection.values = datapoints.map(point => parseFloat(point.average));
            break;
          case 'rds007_conn_active_count': // 活跃连接数
            processedData.connections.active = Math.round(parseFloat(datapoints[datapoints.length - 1].average));
            break;
          }
        });
      
      // 更新图表数据
      this.chartData.cpu.times = processedData.cpu.times;
      this.chartData.cpu.values = processedData.cpu.values;
      
      this.chartData.iops.times = processedData.iops.times;
      this.chartData.iops.values = processedData.iops.values;
      
      // 更新连接分布饼图数据
      const activeConnections = processedData.connections.active;
      const totalConnections = processedData.connections.total;
      const idleConnections = Math.max(0, totalConnections - activeConnections);
      
      this.chartData.connections = [
        { value: activeConnections, name: '活跃连接', itemStyle: { color: '#409EFF' } },
        { value: idleConnections, name: '空闲连接', itemStyle: { color: '#67C23A' } }
      ];
      
      this.chartData.activeConnection.times = processedData.activeConnection.times;
      this.chartData.activeConnection.values = processedData.activeConnection.values;
      
      // 刷新图表
      this.safeRefreshCharts();
    },

    // 新增方法：安全地刷新图表
    safeRefreshCharts() {
      try {
        if (!this.charts.cpu || !this.charts.iops || 
            !this.charts.connection || !this.charts.activeConnection) {
          console.log('图表未初始化，正在尝试初始化...');
          this.safeInitCharts();
          return;
        }
        
        // 刷新图表
        this.refreshCharts()
      } catch (error) {
        console.error('刷新图表时出错:', error);
        // 发生错误时尝试重新初始化
        this.safeInitCharts()
      }
    },

    copyText(text) {
      if (!text) return

      const input = document.createElement('input')
      input.setAttribute('value', text)
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)

      this.$message({
        message: '已复制到剪贴板',
        type: 'success',
        duration: 2000
      })
    }
  },
  beforeDestroy() {
    // 清除计时器
    if (this.chartsInitTimer) {
      clearTimeout(this.chartsInitTimer)
    }
    
    // 移除事件监听
    window.removeEventListener('resize', this.resizeCharts)

    // 销毁图表实例
    for (const key in this.charts) {
      if (this.charts[key]) {
        this.charts[key].dispose()
        this.charts[key] = null
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 0;
}

/* 华为云面板样式 */
.hw-panel {
  margin-bottom: 16px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.hw-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #ebeef5;
}

.hw-panel-title {
  font-size: 14px;
  font-weight: 500;
  color: #252b3a;
  display: flex;
  align-items: center;
}

.hw-panel-title i {
  margin-right: 8px;
  font-size: 16px;
  color: #0052d9;
}

.hw-panel-actions {
  display: flex;
  align-items: center;
}

.time-filter-group {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.time-filter {
  font-size: 12px;
  color: #606266;
  margin-right: 16px;
  cursor: pointer;
}

.time-filter.active {
  color: #0052d9;
}

.hw-panel-body {
  padding: 0;
}

/* 信息组样式 */
.info-group {
  border-bottom: 1px solid #ebeef5;
}

.info-group:last-child {
  border-bottom: none;
}

.info-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
  color: #252b3a;
  cursor: pointer;
  transition: background-color 0.3s;
}

.info-header:hover {
  background-color: #f5f7fa;
}

.info-header i {
  margin-right: 8px;
  font-size: 12px;
  transition: transform 0.3s;
}

.info-header i.is-open {
  transform: rotate(90deg);
}

.info-content {
  padding: 0 16px 16px 36px;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  width: 33.33%;
  margin-bottom: 12px;
  padding-right: 16px;
}

.info-label {
  font-size: 12px;
  color: #606266;
  margin-bottom: 4px;
}

.info-value {
  font-size: 13px;
  color: #252b3a;
  word-break: break-all;
}

.info-value.with-icon {
  display: flex;
  align-items: center;
}

.ellipsis-text {
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hw-label {
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  line-height: 20px;
  color: #0052d9;
  background-color: #e9f2ff;
  border-radius: 2px;
  margin-left: 8px;
}

.hw-label.small {
  font-size: 11px;
  padding: 0 4px;
  line-height: 18px;
}

.hw-link {
  color: #0052d9;
  text-decoration: none;
  margin-left: 8px;
}

.hw-link:hover {
  opacity: 0.8;
}

/* 监控图表样式 */
.monitor-grid {
  display: flex;
  padding: 16px;
}

.monitor-card {
  flex: 1;
  margin-right: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.monitor-card:last-child {
  margin-right: 0;
}

.monitor-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f9fafc;
}

.monitor-title {
  font-size: 13px;
  color: #252b3a;
  display: flex;
  align-items: center;
}

.healthy-tag {
  display: inline-block;
  padding: 0 6px;
  font-size: 11px;
  line-height: 18px;
  color: #67c23a;
  background-color: #f0f9eb;
  border-radius: 2px;
  margin-left: 8px;
}

.monitor-content {
  padding: 16px;
}

.chart-container {
  height: 240px;
  width: 100%;
}

/* 辅助样式 */
.el-icon-document-copy {
  margin-left: 6px;
  color: #909399;
  cursor: pointer;
  font-size: 14px;
}

.el-icon-document-copy:hover {
  color: #0052d9;
}

.el-icon-arrow-down {
  margin-left: 8px;
  font-size: 12px;
  color: #909399;
  cursor: pointer;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .info-item {
    width: 100%;
  }

  .monitor-grid {
    flex-direction: column;
}

  .monitor-card {
    margin-right: 0;
    margin-bottom: 16px;
}

  .monitor-card:last-child {
    margin-bottom: 0;
  }
}
</style>
